import getComponentRootDom from "./getComponentRootDom";
import Icon from "@/components/Icon";
import styles from "./showMessage.module.less";

/**
 * 弹出消息
 * @param {String} content 消息内容
 * @param {String} type 消息类型: info[普通] error[错误] success[成功] warn[警告]
 * @param {Number} duration 消息弹窗的显示时间
 * @param {Dom} container 容器, 消息会显示到该容器的正中; 如果不传, 则显示到页面正中
 * @param {Function} callback 回调函数[该函数在弹窗消失后执行]
 */
export default function (options = {}) {
  const content = options.content || "";
  const type = options.type || "info";
  const duration = options.duration || 2000;
  const container = options.container || document.body;
  // 创建消息元素
  const div = document.createElement("div");
  const iconDom = getComponentRootDom(Icon, {
    type,
  });
  div.innerHTML = `<span class="${styles.icon}">${iconDom.outerHTML}</span><div>${content}</div>`;
  // 设置样式
  const typeClassName = styles[`message-${type}`]; // 类型样式名
  div.className = `${styles.message} ${typeClassName}`;
  if (options.container) {
    // 容器的position是否改动过
    if (getComputedStyle(container).position === "static") {
      container.style.position = "relative";
    }
  }
  // 将div加入到容器中
  container.appendChild(div);
  // 浏览器强行渲染
  div.clientHeight; // 导致reflow
  // 上移并显示
  div.style.opacity = 1;
  div.style.marginTop = 0;
  // 等一段时间消失
  setTimeout(() => {
    div.style.opacity = 0;
    div.style.marginTop = "-25px";
    div.addEventListener(
      "transitionend",
      function () {
        div.remove();
        options.callback && options.callback(); // 如果有回调函数的话就执行回调函数
      },
      { once: true }
      // 只执行一次
    );
  // }, 1000000);
  }, duration);
}
